<template>
    <h1>{{msg}}</h1>
    <input v-model="username" type="text" @blur="handleUpdate($event)">
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    // defineProps({
    //     msg:String
    // })
    // defineProps<{
    //     msg?: (string | number | boolean), 
    //     title?: string
    // }>()

    // interface Props{
    //     msg?: (string | number | boolean), 
    //     title?: string[]
    // }

    // withDefaults(defineProps<Props>(), {
    //     msg: 'hello',
    //     title: () => ['one', 'two']
    // })

    withDefaults(defineProps<{
        msg?: (string | number | boolean)
        title?: string
    }>(), {
        msg: 'hello vite2',
        title: '默认标题'
    })

    // ts 限制当个变量类型
    const username = ref<string>('')
    
    // const emit = defineEmits(['on-update'])
    const emit = defineEmits<{
        (event: 'on-update',data: string): void,
        (event: 'on-delete', id: string):void
    }>()

    const handleUpdate = (event: any) =>{
        const { target } = event
        // console.log(target.value);
        emit('on-delete', target.value)
    }

</script>